"use client";
import TaskHeaderList from "@/components/tasks/TaskHeaderList";
import TaskRowList from "@/components/tasks/TaskRowList";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { trpc } from "@/app/_trpc/client";
import { UserRoundPen } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import useHandleParams from "@/hooks/useHandleParams";
import {
EmplyPlaceHolder,
EmptyContent,
EmptyIcon,
EmptyTitle,
} from "@/components/EmplyPlaceHolder";
import { lazy, Suspense } from "react";
import ErrorBoundary from "@/components/ErrorBoundary";
import Loading from "@/components/Loading";
const DataTableToolsUser = lazy(() => import("./ToolsUserList"));
const ErrorUserToolsFallback = () => {
return (
<div className="min-h-[60vh] grid place-content-center">
<EmplyPlaceHolder>
<EmptyIcon iconName="error" />
<EmptyTitle className="text-base">Ocurrió un error</EmptyTitle>
<EmptyContent className="text-xs">
Por favor, revisa tu conexión a internet o intenta más tarde.
</EmptyContent>
</EmplyPlaceHolder>
</div>
);
};
const UserPage = ({ userId }: { userId: string }) => {
const { setParams, getParam, getAllParams } = useHandleParams();
const searchParams = getAllParams();
const {data:user}= trpc.users.getUserById.useQuery({
...searchParams,
userId,
});
if (!user) {
return (
<div className="min-h-[55vh] grid place-content-center">
<EmplyPlaceHolder>
<EmptyIcon iconName="clipBoardList" />
<EmptyTitle className="text-2xl font-bold">404</EmptyTitle>
<EmptyContent>Usuario no encontrado...</EmptyContent>
</EmplyPlaceHolder>
</div>
);
}
return (
<div className="px-5 md:px-10 ">
<header className=" flex absolute top-6 gap-2 justify-between items-center pb-2 border-b border-gray-300">
<div>
<h3 className="text-2xl tracking-wide font-semibold">Usuario</h3>
</div>
</header>
<div className="bg-white/30 flex items-center gap-5 rounded-xl pt-1 py-3 px-5 max-w-[800px] m-auto mt-10">
<div className=" ">
<Avatar className="w-[70px] h-[70px] md:w-[100px] md:h-[100px]">
<AvatarFallback className="text-3xl uppercase bg-primary/20 ">
{`${user?.firstName.slice(0, 1)}${user?.lastName?.slice(0, 1)}`}
</AvatarFallback>
</Avatar>
</div>
<div>
<div className="flex justify-between items-center">
<div className="flex gap-2 justify-end text-end">
<h4 className="text-medium">Informacion personal</h4>
<UserRoundPen />
</div>
</div>
<div className="flex flex-wrap gap-5 mt-4">
<div>
<h4 className="text-sm font-light text-gray-400">Name</h4>
<p className="text-base font-medium">{user?.firstName}</p>
</div>
<div>
<h4 className="text-sm font-light text-gray-400">Apellido</h4>
<p className="capitalize text-base">{user?.lastName}</p>
</div>
<div>
<h4 className="text-sm font-light text-gray-400">Correo</h4>
<p className="capitalize text-base">{user?.email}</p>
</div>
</div>
</div>
</div>
<div className="mt-5">
<Tabs defaultValue={getParam("tab") || "tasks"} className=" w-full ">
<TabsList className="bg-transparent w-full" asChild>
<div className="flex justify-between border-b-2 border-gray-200">
<div>
<TabsTrigger value="tasks" name="tasks">
Tareas
</TabsTrigger>
<TabsTrigger value="tools" name="tools">
Herramientas
</TabsTrigger>
</div>
</div>
</TabsList>
<TabsContent value="tasks" className=" w-full min-h-screen">
<div>
<header className="flex flex-wrap justify-between items-center">
<div>
<h3 className="text-xl font-medium mb-5 pt-5">
Lista de tareas
</h3>
</div>
<div className="flex gap-10">
<div>
<Select
name="range"
onValueChange={(value) => setParams("range", value)}
defaultValue={
getParam("range") ? getParam("range") : "thismonth"
}
>
<SelectTrigger className="min-w-[180px]">
<div className="flex gap-1 text-xs font-medium">
<div>Rango: </div>
<SelectValue placeholder="Escoja rango" />
</div>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="today">Hoy</SelectItem>
<SelectItem value="thismonth">Este mes</SelectItem>
<SelectItem value="last3months">
Ultimos 3 meses
</SelectItem>
<SelectItem value="thisyear">Este año</SelectItem>
<SelectItem value="all">Todos</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div>
<Select
onValueChange={(value) => setParams("status", value)}
defaultValue={
getParam("status") ? getParam("status")! : "all"
}
>
<SelectTrigger className="w-[180px]">
<div className="flex gap-1 text-xs font-medium">
<div>Estado: </div>
<SelectValue placeholder="Estado de tarea" />
</div>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="completada">Completado</SelectItem>
<SelectItem value="no iniciada">
No iniciada
</SelectItem>
<SelectItem value="en proceso">En proceso</SelectItem>
<SelectItem value="revisada">Revisada</SelectItem>
<SelectItem value="all">Todos</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>{" "}
</div>
</header>
<div>
{user?.tasks?.length! > 0 ? (
<Table>
<TaskHeaderList />
<TableBody>
{user?.tasks?.map((task:any) => (
<TaskRowList key={task?.id} task={task} />
))}
</TableBody>
</Table>
) : (
<div className="text-center mt-20">
<h4 className="text-base font-medium tracking-wider">
No resultados encontrados
</h4>
</div>
)}
</div>
</div>{" "}
</TabsContent>
<TabsContent value="tools" className=" w-full min-h-screen">
<div>
<header className="flex justify-between items-center">
<div>
<h3 className="text-xl font-medium mb-5 pt-5">
Lista de herramientas
</h3>
</div>
</header>
<div>
<ErrorBoundary fallback={<ErrorUserToolsFallback />}>
<Suspense
key={userId}
fallback={
<div className="grid place-content-center min-h-[40vh]">
<Loading />
</div>
}
>
<DataTableToolsUser userId={userId} />
</Suspense>
</ErrorBoundary>
</div>
</div>{" "}
</TabsContent>
</Tabs>
</div>
</div>
);
};
export default UserPage;